<template>
  <div>
    <h1>绑定属性&事件处理&表单绑定：</h1>

    <h2>示例一、v-on基础</h2>

    <el-button type="primary" v-on:click="counter++">按钮点击1</el-button>
    <el-button type="primary" v-on:click="btnClick()">按钮点击1</el-button>
    <span>{{counter}}</span>

    <h2>示例二、v-model基础</h2>
    <label>年龄：</label>
    <el-input v-model="age" />
    <el-button type="primary" v-on:click="add">增加</el-button>

    <h2>示例三、v-model修饰符</h2>
    <el-input v-model.lazy="message" />
    <span>当前内容：{{message}}</span>

    <el-input v-model.number="age" />
    <span>年龄：{{age}} 类型:{{typeof age}}</span>

    <el-input v-model.trim="message" />
    <span>当前内容：------------{{message}}------------</span>

  </div>
</template>

<script>
export default {
  data () {
    return {
      counter: 0,
      age: 10,
      message: "测试",

    }
  },
  methods: {
    btnClick () {
      this.counter++

    },

    add () {
      this.age = this.age + 1;
    }
  }
}
</script>




